【まとめ】パララックスを実装するためのプラグイン6選
こんにちは！
今回は、パララックスをサイトに実装するためのプラグイン・JSライブラリをご紹介したいと思います。パララックスを実装するためのプラグインやライブラリは数多くあり、今回はその中でも、導入が簡単で高機能なもの選びました。
ぜひ、自身のサイトにあうパララックスを検討する際の参考にしてみてください！
パララックスとは
パララックスは、元々は写真用語で実際に撮った写真とカメラのファインダー内の像とがずれて写る現象のことを言います。
webデザインに用いられるパララックスも、「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言い、パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます。
この他にもパララックスを使うことで、以下のメリットがあると言われています。
- 見せたいものをピンポイントで見せることができる
- デザインの幅が広がる
- ストーリー性を持たせることができる
- ユーザーの離脱を抑える
パララックスを実装するためのプラグイン６選
1. Rellax.js
「Rellax.js」はvanilla JS製のjQueryに依存しないJavaScriptパララックスライブラリで、ファイルを読み込み、JavaScript数行、HTML要素にクラスと属性を指定するだけで、簡単にパララックスを実装することができるんです。また、JavaScriptファイルも4KBとかなり軽量です。
Installation
Rellax.jsをインストールするには、npm install rellax --save をするか、ファイルをダウンロードしてhtmlのbody閉じタグの前に以下のコードを記述します。srcにはファイルを配置したパスを指定して下さい。
<script src="/js/rellax.min.js"></script>Usage
Rellax.jsを使うには、パララックス効果を付けたい要素のクラスに任意のクラス名を指定して、関数を呼びます。
<div class="rellax">
I’m that default chill speed of "-2"
</div>
<script>
// 任意のクラスを指定
var rellax = new Rellax('.rellax');
</script>また、パララックス効果の詳細な設定をブロックとして渡すこともできます。
<script>
// オプションを渡す
var rellax = new Rellax('.rellax', {
speed: -2,
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false
});
</script>この他にも「Rellax.js」の詳しい使い方は、【パララックスとは？】Rellax.jsの使い方でご紹介してますので、そちらでご覧ください！
2. simpleParallax.js
「simpleParallax.js」はvanilla JS製で、他フレームワークやライブラリに依存することはなく実装できます。非常に軽量で画像をパララックスの対象としており、余計なHTMLを書かなくていいのでシンプルな実装ができます。
Installation
まずはファイルをダウンロードしてhtmlのbody閉じタグの前に以下のコードを記述します。srcにはファイルを配置したパスを指定して下さい。またはCDNを使ってスクリプトを読み込むことができます。
<script src="/js/simpleParallax.js"></script>
// or
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js"></script>Usage
使用する際は、使用したいタグにクラスを指定して、javascriptに記述します。オプションもブロックで渡すことで、パララックス効果を設定することができます。
<img class="thumbnail" src="image.jpg" alt="image">
<script>
// 任意のクラスの要素を取得
const image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);
</script>3. Parallax.js
「Parallax.js」は、背景画像にパララックスを付け加えることができるとてもシンプルなプラグインです。こちらはjQueryのプラグインとして動作するため、Parallax.jsだけでなく忘れずにjQueryもインポートするようにしてください.
Installation
まずは、body閉じタグ前で、parallax.jsを読み込みましょう。この時、parallax.jsの前に必ずjQueryを先に読み込むようにします。parallax.jsの読み込みはCDNでもできます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/parallax.min.js"></script>
// or
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>Usage
pallax.jsを使用するには、使用したい要素にいくつかのデータ属性をマークアップすることで簡単にパララックス効果を付けることができます。
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/image.jpg"></div>使用したい要素にdata-parallax=”scroll”とdata-image-src=”使用する画像のパス”を指定します。
また、プラグインを手動で呼び出すときは、iQueryターゲット要素を指定して以下のように記述するだけです！この際に細かいオプションも付けることができます。
<script>
$('.parallax-window').parallax({
imageSrc: '/images/image.jpg',
naturalWidth: 600,
naturalHeight: 400
});
</script>4. skrollr
こちらの「skrollr」は、jQueryのプラグインでスクロールで要素の移動や、色の変化、フェードイン・フェードアウトなど自由度はとても高いです。Javascriptのスキルは必要なく、HTMLとCSSだけで、高度なパララックスを実装することができます。
Installation
こちらも「parallax.js」と同じくjQueryのプラグインなので、先にjQueryを読み込みようにしましょう。読み込んだら、skokkr.init()を呼び出して完了です。呼び出すときはbodyタグ前でやりましょう！
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>また、プロジェクトの構成でrequire.jsを使用している場合は、モジュールとしてskrollrを使用することができます。
<script>
require(['skrollr'], function(skrollr){
var s = skrollr.init();
});
</script>Usage
「slrollr.js」では、パララックス効果の設定をhtml要素のデータ属性で細かく設定することができます。要素ごとに細かく設定できるので、ユーザーが調整しやすいですね！
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>ここでは、要素の背景色や要素の回転を複数のスタイル（キーフレーム）で定義しています。ここにスクロールで変化するキーフレームを設定しておくことで、プラグインがその間を補正してくれます！
5. Luxy.js
「Luxy.js」は自動で慣性スクロールがついて、パララックスの効果をより魅力的にすることができます。また日本の方が作られたライブラリで、日本語のドキュメントが多く、vanilla JS製でjQueryに依存しないので実装しやすいところもおすすめのポイントです。
Installation
まずは、ファイルをインストールして、html上のbody閉じタグ直前に以下のように書いてスクリプトを読み込みます。
<script src="path/to/luxy.js" charset="utf-8"></script>Usage
「Luxy.js」を使う際は、まずスクリプトでluxy.init()を呼び出します。その次に、パララックス効果を付けたいターゲット要素のラップ要素作り、id=”luxy”を指定します。ターゲットの要素には、class=”luxy-el”を指定して、パララックス効果のオプションをデータ属性で設定します。
<div id="luxy">
<div class="luxy-el" data-horizontal="1" data-speed-x="-5" data-offset="-50"></div>
</div>
<script charset="utf-8">
luxy.init();
</script>すごくシンプルで分かりやすいので、初心者の方にはぜひおすすめですね！
6. ScrollMagic
「ScrollMagic」はスクロールに関する様々なアクションを制御できるプラグインです。もちろんパララックスもカバーしています！また、バージョンが更新されて、GSAP, VelocityJSなどのフレームワークと連携することで、アニメーションの選択しを増やすことができるようになりました。パララックスだけでなく、様々なスクロールアクションを実装したいときなどにおすすめです！
Installation
「ScrollMagic」を使う際も、まずは下記のように記述してスクリプトを読み込みます。CDNでの読み込みも可能です。
<script src="/js/scrollmagic/uncompressed/ScrollMagic.js"></script>
// or
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>Usage
「ScrollMagic」では、1つのコントローラには1つ以上のシーンがアタッチされています。シーンには、コンテナが特定の位置までスクロールされた時の、振舞いが定義されています。下の例では、ターゲットの要素を一定のスクロール間固定する処理を実装しています。
// コントローラの作成
<script>var controller = new ScrollMagic.Controller();</script>
// シーンの作成
<script>
new ScrollMagic.Scene({
duration: 100, // 継続距離
offset: 50 // 開始位置
})
.setPin('#my-sticky-element') // 指定した要素をピン留めする（固定）
.addTo(controller); // コントローラに追加
</script>「ScrollMagic」はオブジェクト指向のアプローチを採用しているため、コンテナ毎にコントローラを使用して、それぞれの振舞いを定義していシーンを複数アタッチしています。そのため、javascriptを使い始めたばかりの方には少し扱いづらいライブラリになっています。
しかし「ScrollMagic」では、この他にも複雑な処理を実装することや他のフレームとの連携などができます。そういった複雑な処理が必要となる場合やjavascriptに対してある程度の知識がある方は是非使ってみて下さい！
まとめ
パララックスを使うことで、サイトに遊び心を持たせることができ、ユーザーが飽きないWebページを作ることができます。
しかし、何も考慮せずに実装するとガタガタなパララックスになってしまし、却ってサイトの完成度が下がってしまいます。
自身のサイトにパララックスを実装する際は、どのプラグインが適切か考えてみましょう！それにしてもいっぱいありすぎて迷っちゃますよね。
intern
